<template>
  <a-tabs v-model:activeKey="activeKey" style="padding: 0 15px">
    <a-tab-pane key="1" tab="加盟信息">
      <div class="main-box">
        <div class="box">
          <div class="left">
            <div class="left-list">
              <a-list :data-source="projectList">
                <template #renderItem="{ item, index }">
                  <a-list-item style="border-bottom: 1px dotted #eee">
                    <div
                        style="width: 100%"
                        :class="index == activeIndex ? 'active' : ''"
                        @click="changeProject(index)"
                    >
                      {{ item.label }}
                    </div>
                  </a-list-item>
                </template>
              </a-list>
            </div>
          </div>
          <div class="attract-config-box">
            <div style="padding: 10px">
              <div class="title-info">
                <span class="title-left"></span>
                <span class="title">招商行业</span>
                <span class="title-right"></span>
              </div>

              <div
                  class="tags"
                  style="display: flex; align-items: center; flex-wrap: wrap"
              >
                <template v-for="(item, index) in industryList">
                  <div class="tagItem">
                    <span style="margin: 0 10px"> {{ item }}</span>
                    <CloseOutlined
                        style="color: red"
                        @click="deleteTag(index)"
                    />
                  </div>
                </template>

                <a-button
                    type="text"
                    style="margin: 5px 10px 0"
                    @click="addIndustry"
                    v-if="!inputIndustry"
                >
                  <template #icon>
                    <PlusOutlined/>
                  </template>
                  添加
                </a-button>

                <a-input
                    v-if="inputIndustry"
                    style="width: 150px; margin: 5px 10px 0"
                    placeHolder="请输入招商行业"
                    v-model:value="industry"
                    @blur="industryChange"
                ></a-input>
              </div>

              <div class="title-info">
                <span class="title-left"></span>
                <span class="title">招商流程</span>
                <span class="title-right"></span>
              </div>
              <div
                  class="tags"
                  style="display: flex; align-items: center; flex-wrap: wrap"
              >
                <template v-for="(item, index) in flowPathList">
                  <div class="tagItem">
                    <HolderOutlined/>
                    <span class="index-tag"> {{ index + 1 }}</span>
                    <span style="margin: 0 10px"> {{ item }}</span>
                    <CloseOutlined
                        style="color: red"
                        @click="closeItem(index)"
                    />
                  </div>
                  <ArrowRightOutlined
                      style="color: red; margin: 5px 10px 0"
                      v-if="index != flowPathList.length - 1"
                  />
                </template>

                <a-button
                    type="text"
                    v-if="!inputFlowPath"
                    style="margin-top: 5px; margin-left: 10px"
                    @click="addFlowPath"
                >
                  <template #icon>
                    <PlusOutlined/>
                  </template>
                  添加
                </a-button>

                <a-input
                    v-if="inputFlowPath"
                    style="width: 150px; margin: 5px 0 0 10px"
                    v-model:value="flowPath"
                    @blur="flowPathChange"
                    placeHolder="请输入招商流程"
                ></a-input>
              </div>

              <div v-show="false">
                <div class="mb-10">组图</div>
                <div>
                  <a-upload
                      :action="$utils.imgAction"
                      :headers="{ 'org-token': $store.getters.token }"
                      v-model:file-list="photoList"
                      @change="uploadPhoto"
                      name="image"
                      :data="{ dir: 'work_hr_big_data' }"
                      accept="image/jpg,image/jpeg,image/gif,image/png"
                      list-type="picture-card"
                  >
                    <div>
                      <PlusOutlined/>
                    </div>
                  </a-upload>
                </div>
                <div style="color: #aaa">建议尺寸1920*550，最多可上传6张</div>
              </div>

              <a-row :gutter="9">
                <a-col span="12">
                  <div>
                    <div class="title-info">
                      <span class="title-left"></span>
                      <span class="title">园区优势</span>
                      <span class="title-right"></span>
                    </div>
                    <div>
                      <vue-ueditor-wrap
                          id="editor-demo-01"
                          v-model="park_advantage"
                          :config="ueditorEditorConfig"
                          editor-id="editor-demo-01"
                      ></vue-ueditor-wrap>
                    </div>
                  </div>
                </a-col>
                <a-col span="12">
                  <div>
                    <div class="title-info">
                      <span class="title-left"></span>
                      <span class="title">收费标准</span>
                      <span class="title-right"></span>
                    </div>

                    <div>
                      <vue-ueditor-wrap
                          v-model="charge_standard"
                          :config="ueditorEditorConfig"
                          editor-id="editor-demo-02"
                      ></vue-ueditor-wrap>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </div>
          </div>
        </div>
        <div class="btn-area">
          <a-button class="save-btn" type="primary" @click="submit"
          >保存
          </a-button
          >
        </div>
      </div>
    </a-tab-pane>
    <a-tab-pane key="2" tab="页面设计">
      <InvestmentDecoration :status="'0'"/>
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import {
  defineComponent,
  ref,
  createVNode,
  reactive,
  computed,
  watch,
  toRefs,
} from "vue";
import {
  PlusOutlined,
  HolderOutlined,
  ArrowRightOutlined,
  CloseOutlined,
} from "@ant-design/icons-vue";
import {message} from "ant-design-vue";
import request from "../../../common/utils/request";
import {Modal} from "ant-design-vue";
import moment from "moment";
import store from "../../../store";
import utils from "../../../common/utils/utils";
import InvestmentDecoration from "../../village/InvestmentDecoration_new/index.vue";
import {useRouter} from "vue-router";
import {VueUeditorWrap} from "vue-ueditor-wrap";

export default defineComponent({
  name: "attractConfig",
  components: {
    PlusOutlined,
    HolderOutlined,
    ArrowRightOutlined,
    CloseOutlined,
    InvestmentDecoration,
    VueUeditorWrap,
  },
  setup() {
    const router = useRouter();
    let state = reactive({
      list: [],
      itemList: [],
      activeIndex: 0,
      ueditorEditorConfig: {
        UEDITOR_HOME_URL: utils.staticUeditorEditorPaths, // 访问 UEditor 静态资源的根路径，可参考常见问题1
        serverUrl: request.BASE_URL + "/public/system/uploadUEditor", // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        initialFrameHeight: 350,
        initialFrameWidth: "100%",
        autoHeightEnabled: false,
        enableAutoSave: false,
      },
      photoList: [],
      park_advantage: "",
      charge_standard: "",
      activeKey: "1",
      flowPath: "",
      industry: "",
    });

    const uploadPhoto = (info) => {
      let resFileList = [...info.fileList];
      let result = resFileList.slice(-1);
      result = result[0];
      if (result && result.response) {
        if (result.response.code == 1000) {
          console.log(resFileList, "resFileList");
          state.photoList = resFileList;

          console.log(resFileList, "resFileList");
        } else {
          message.warning(result.response.msg);
        }
      }
    };

    // 行业
    const inputIndustry = ref(false);
    const industryList = ref([]);

    const addIndustry = () => {
      inputIndustry.value = true;
    };

    const industryChange = () => {
      if (state.industry.length == 0) {
        inputIndustry.value = false;
        return;
      }
      industryList.value.push(state.industry);
      inputIndustry.value = false;
      state.industry = "";
    };

    const deleteTag = (index) => {
      industryList.value.splice(index, 1);
      console.log(industryList.value);
    };

    // 流程
    const inputFlowPath = ref(false);
    const flowPathList = ref([]);

    const addFlowPath = () => {
      inputFlowPath.value = true;
    };
    const closeItem = (index) => {
      flowPathList.value.splice(index, 1);
    };

    const flowPathChange = () => {
      if (state.flowPath.length == 0) {
        inputFlowPath.value = false;
        return;
      }
      flowPathList.value.push(state.flowPath);
      inputFlowPath.value = false;
      state.flowPath = "";
    };

    const getConfig = () => {
      const item = projectList.value[state.activeIndex];
      request
          .get("/org", "/business/customer/courtship/getConfig", {
            village_id: item.value,
            org_id: store.getters.userInfo.org_id,
          })
          .then((res) => {
            console.log(res);
            industryList.value = res.data.business_industry
                ? res.data.business_industry
                : [];
            flowPathList.value = res.data.business_process
                ? res.data.business_process
                : [];
            state.charge_standard = res.data.charge_standard;
            state.park_advantage = res.data.park_advantage;
            state.photoList = res.data.carousel_image;
          });
    };

    const submit = () => {
      let fileList = state.photoList.map((item) => {
        return {
          uid: item.uid,
          name: item.name,
          url: item.response ? item.response.data.fileUrl : item.url,
        };
      });
      let params = {
        park_advantage: state.park_advantage,
        charge_standard: state.charge_standard,
        carousel_image: fileList,
      };
      params.village_id = projectList.value[state.activeIndex].value;
      params.business_industry = industryList.value;
      params.business_process = flowPathList.value;
      request
          .post("/org", "/business/customer/courtship/config", params)
          .then((res) => {
            message.success("保存成功");
          })
          .finally(() => {
            state.loading = false;
          });
    };

    // 切换项目
    const changeProject = (index) => {
      state.activeIndex = index;
      getConfig();
    };

    // 项目相关
    const projectList = ref([]);
    const getProjectList = () => {
      request.get("/org", "/build/villageAndBuildList/v2", {checked: 1}).then((res) => {
        let vList = [];
        res.villageList.forEach((item) => {
          vList.push({
            label: item.name,
            value: item.id,
          });
        });
        projectList.value = vList;
        if (projectList.value.length > 0) {
          state.activeIndex = 0;
          getConfig();
        }
      });
    };

    getProjectList();

    // getConfig();
    return {
      ...toRefs(state),
      uploadPhoto,
      submit,
      projectList,
      changeProject,
      addIndustry,
      addFlowPath,
      flowPathList,
      industryList,
      closeItem,
      inputFlowPath,
      inputIndustry,
      flowPathChange,
      industryChange,
      deleteTag,
    };
  },
});
</script>

<style scoped>
.main-box {
  position: relative;
  height: calc(100vh - 50px);
  background-color: white;
}

.box {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: calc(100% - 50px);
}

.left {
  width: 160px;
  padding: 20px 10px;
  height: calc(100%);
}

.left-list {
  height: 100%;
  border-right: 1px solid #eee;
}

.active {
  color: #2681f3;
}

.title-info {
  width: 240px;
  color: #2681f3;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-left {
  display: inline-block;
  width: 30px;
  height: 1px;
  background-color: #2681f3;
}

.title {
  display: inline-block;
  flex: 1;
  text-align: center;
  font-size: 18px;
  margin: 0 5px;
}

.title-right {
  display: inline-block;
  width: 100px;
  height: 1px;
  background-color: #2681f3;
}

.tags {
  margin: 10px 0;
}

.attract-config-box {
  flex: 1;
  height: 100%;
  overflow: scroll;
}

.mb-10 {
  margin-bottom: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.btn-area {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 50px;
  border-top: 1px solid #eee;
  z-index: 20;
  text-align: center;
  padding: 10px;
}

:deep(.edui-editor) {
  z-index: 10 !important;
}

.tagItem {
  display: flex;
  align-items: center;
  background-color: #efefef;
  padding: 5px 10px;
  margin: 5px 5px 0;
  border-radius: 5px;
}

.index-tag {
  margin-left: 5px;
  width: 20px;
  height: 20px;
  border-radius: 15px;
  font-size: 14px;
  color: white;
  text-align: center;
  line-height: 20px;
  background-color: #2681f3;
}
</style>
